<template>
  <div class="discard-customer-container">
    <!-- 搜索表单 -->
    <el-card class="customer-header"
:body-style="{ position: 'relative' }">
      <el-form
        ref="queryFormRef"
        :model="queryForm"
        :inline="true"
        label-width="80px"
        class="basic-search-form"
      >
        <el-form-item label="关键词">
          <el-input
            v-model="queryForm.keywords"
            placeholder="请输入客户名称"
            clearable
            style="width: 220px"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label="客户类型">
          <el-select
            v-model="queryForm.type"
            placeholder="请选择类型"
            clearable
            style="width: 220px"
          >
            <el-option label="个人客户"
value="1" />
            <el-option label="企业客户"
value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="废弃时间">
          <el-date-picker
            v-model="queryForm.discardTimeRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <div class="search-buttons">
            <div class="left-buttons">
              <el-button
type="primary" @click="handleSearch">
查询
</el-button>
              <el-button @click="handleReset">
重置
</el-button>
            </div>
            <div class="right-buttons">
              <el-button
                type="success"
                :disabled="selectedCustomers.length === 0"
                @click="handleBatchRestore"
              >
                批量恢复
              </el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="customer-content">
      <!-- 表格工具栏 -->
      <div class="table-toolbar">
        <el-button
          type="success"
          :disabled="selectedCustomers.length === 0"
          @click="handleBatchRestore"
        >
          批量恢复
        </el-button>
      </div>

      <!-- 废弃客户表格 -->
      <el-table
        v-loading="loading"
        :data="customerList"
        border
        stripe
        class="custom-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"
width="55" />
        <el-table-column prop="name"
label="客户名称" min-width="150" show-overflow-tooltip>
          <template #default="scope">
            <span class="customer-name">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="customer_type"
label="客户类型" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.customer_type === 1 ? 'info' : 'primary'">
              {{ scope.row.customer_type === 1 ? '个人' : '企业' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="grade_name"
label="客户等级" width="120" show-overflow-tooltip />
        <el-table-column prop="belong_name"
label="所属管家" width="120" show-overflow-tooltip />
        <el-table-column
          prop="discard_time"
          label="废弃时间"
          width="180"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{
              scope.row.discard_time
                ? formatDateTime(new Date(scope.row.discard_time).getTime())
                : '-'
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="discard_reason"
          label="废弃原因"
          min-width="150"
          show-overflow-tooltip
        />
        <el-table-column label="操作"
width="150" fixed="right">
          <template #default="scope">
            <el-button size="small"
type="primary" plain @click="handleRestore(scope.row)">
              恢复
            </el-button>
            <el-button size="small"
type="danger" plain @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <BasePagination
          v-model="queryForm.page"
          v-model:page-size="queryForm.limit"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </el-card>

    <!-- 客户详情抽屉 -->
    <GlobalDrawer
      v-model="detailDrawerVisible"
      title="客户详情"
      size="60%"
      :show-footer-buttons="false"
    >
      <div class="drawer-content">
        <el-descriptions :column="2"
size="large" border>
          <el-descriptions-item label="客户名称">
            {{ currentCustomer.name }}
          </el-descriptions-item>
          <el-descriptions-item label="客户类型">
            <el-tag :type="currentCustomer.customer_type === 1 ? 'info' : 'primary'">
              {{ currentCustomer.customer_type === 1 ? '个人' : '企业' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="客户等级">
            {{ currentCustomer.grade_name }}
          </el-descriptions-item>
          <el-descriptions-item label="所属管家">
            {{ currentCustomer.belong_name }}
          </el-descriptions-item>
          <el-descriptions-item label="废弃时间">
            {{
              currentCustomer.discard_time
                ? formatDateTime(new Date(currentCustomer.discard_time).getTime())
                : '-'
            }}
          </el-descriptions-item>
          <el-descriptions-item label="废弃原因">
            {{ currentCustomer.discard_reason }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ currentCustomer.create_time }}
          </el-descriptions-item>
          <el-descriptions-item label="详细地址"
:span="2">
            {{ currentCustomer.address }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </GlobalDrawer>
  </div>
</template>

<script setup lang="ts">
  // 从外部文件导入所有逻辑
  import {
    // 响应式数据
    queryForm,
    customerList,
    total,
    loading,
    selectedCustomers,
    detailDrawerVisible,
    currentCustomer,
    queryFormRef,

    // 方法
    handleSearch,
    handleReset,
    handleRestore,
    handleDelete,
    handleBatchRestore,
    handleSelectionChange,
    handleSizeChange,
    handleCurrentChange,
    closeDetailDrawer,
    formatDateTime,
  } from './DiscardCustomerScript'

  // 导入组件
  import { GlobalDrawer } from '@/components/common'
  import BasePagination from '@/components/base/BasePagination.vue'
  import { onMounted } from 'vue'

  // 初始化加载
  onMounted(() => {
    handleSearch()
  })
</script>

<style scoped src="./DiscardCustomerStyle.scss"></style>
